<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-content">
      <!--  滚动设备表单-->
      <div
        class="module"
        v-for="(item, index) in devices.concat(devices)"
        :key="index"
        @click="showDeviceDialog(item)"
      >
        <el-icon :size="85" :style="`color: ${item.iconColor};`"
          ><component :is="item.icon"></component
        ></el-icon>

        <div class="module-info" style="color: dodgerblue">
          {{ item.description }}
          <br />
          <!-- 颜色 -->
          <div class="device-category" style="color: rgba(255, 255, 255, 1)">
            {{ item.deviceCategory }}
          </div>
          <span
            :class="{
              'status-text': true,
              working: item.status === 'working',
              idle: item.status !== 'working',
            }"
          >
            <!-- 圆点，颜色高亮 -->
            ●
            {{ item.status === "working" ? "在线" : "不在线" }}
          </span>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      v-model="deviceDialogVisible"
      title="设备介绍"
      width="650"
      align-center
    >
      <div v-if="currentDevice"></div>
      <img
        :src="currentDevice.informationImage"
        style="width: 620px; height: auto"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="deviceDialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import {
  SetUp,
  Odometer,
  CameraFilled,
  Guide,
  Filter,
  Platform,
} from "@element-plus/icons-vue";
// 导入设备信息本地图片
import CO2_device from "@/assets/device_information/CO2_device.png";
import SIF_device from "@/assets/device_information/SIF_device.png";
import CH4_device from "@/assets/device_information/CH4_device.png";
import Meteorology_device from "@/assets/device_information/Meteorology_device.png";
import Phenology_device from "@/assets/device_information/Phenology_device.png";

// 模拟设备信息
const devices = [
  {
    icon: Platform,
    description: "空气颗粒物传感器",
    deviceCategory: "YL-ES",
    status: "working",
    iconColor: "#a4b0be",
    informationImage: SIF_device,
  },
  {
    icon: SetUp,
    description: "CO\u2082传感器",
    // 型号
    deviceCategory: "AT-CO₂",
    status: "working",
    iconColor: "Pink",
    informationImage: CO2_device,
  },
  {
    icon: Guide,
    description: "风速风向传感器",
    deviceCategory: "YL-WSD",
    status: "working",
    iconColor: "white",
    informationImage: CH4_device,
  },
  {
    icon: CameraFilled,
    description: "物候传感器",
    deviceCategory: "CAM-5",
    status: "working",
    iconColor: "rgba(56, 173, 169,1.0)",
    informationImage: Phenology_device,
  },
  {
    icon: Odometer,
    description: "空气温湿压传感器",
    deviceCategory: "HMP110",
    status: "working",
    iconColor: "DarkOrange",
    informationImage: Meteorology_device,
  },
];

const scrollContainer = ref(null);
let scrollInterval = null;

// 循环滚动方法
const startAutoScroll = () => {
  scrollInterval = setInterval(() => {
    if (scrollContainer.value) {
      const scrollWidth = scrollContainer.value.scrollWidth;
      const clientWidth = scrollContainer.value.clientWidth;
      const scrollLeft = scrollContainer.value.scrollLeft;
      if (scrollWidth - scrollLeft <= clientWidth) {
        // 当滚动到末尾时，瞬间跳转到开头，实现无缝循环
        scrollContainer.value.scrollLeft = 0;
      } else {
        scrollContainer.value.scrollLeft += 1;
      }
    }
  }, 20);
};

// 停止滚动
const stopAutoScroll = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval);
  }
};

// 弹窗相关
const deviceDialogVisible = ref(false); // 控制弹窗显示
const currentDevice = ref(null); // 当前点击的设备信息

// 显示设备弹窗
const showDeviceDialog = (device) => {
  currentDevice.value = device; // 设置当前设备信息
  deviceDialogVisible.value = true; // 打开弹窗
};

onMounted(() => {
  startAutoScroll();
});

onUnmounted(() => {
  stopAutoScroll();
});
</script>

<style lang="scss" scoped>
.scroll-container {
  overflow-x: hidden;
  width: 90%;
  height: 80%;
  position: relative;
  padding-top: 2%;
  // 禁止生成滚轮
  &::-webkit-scrollbar {
    display: none;
  }
  .scroll-content {
    display: flex;
    white-space: nowrap;
    height: 100%;
    width: 90%;
    .module {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 2.5vh;
      transition: transform 0.5s ease; /* 平滑过渡效果 */
      cursor: pointer; /* 鼠标移入时显示手型 */
    }
    .module-info {
      font-size: 1.6vh;
      color: #333;
      margin-top: 0vh;
      text-align: center;
      line-height: 2vh; /* 调整行高 */
      .device-category {
        line-height: 2.5vh;
        font-size: 1.6vh;
        color: #333;
      }
      .status-text.working {
        color: #7bed9f; /* 工作中状态的文本颜色 */
        font-size: 1.6vh;
      }
      .status-text.idle {
        color: #eccc68; /* 空闲状态的文本颜色 */
        font-size: 1.6vh;
      }
    }
  }
}
</style>